{% extends 'marketing/base.html' %}
{% load static %}
{% load paginate %}
{% block content %}
{{ block.super }}

<div class="main_container ml-5 mr-5">
  <div class="row marl">

    <div class="filter_row list_filter_row row marl col-md-12 mb-2">
      <div class="">
        <div class="card">
          <div class="card-body">
            <form id="leads_filter" action="" method="POST">
              <div class="card-body ">
                <div class="card-title">Filters</div>
                <div class="row marl">
                  <div class="filter_col col-md-3">
                    <div class="form-group">
                      <label for="exampleInputEmail1">Name</label>
                      <input type="text" class="form-control" placeholder="Contact List Name" name="contact_list_name"
                        value="{{request.POST.contact_list_name}}">
                    </div>
                  </div>
                  <div class="filter_col col-md-3">
                    <div class="form-group">
                      <label for="exampleInputEmail1">Created By</label>
                      <select name="created_by" id="created_by" class="assigned_users_ form-control">
                        <option value="">
                          ------------------</option>
                        {% for user in users %}
                        <option value="{{user.id}}" {% if user.id|slugify == request.POST.created_by %} selected=""
                          {% endif %}>
                          {{user.email}}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  <div class="filter_col col-md-3">
                    <div class="form-group">
                      <label for="exampleInputEmail1">Tags</label>
                      <select class="form-control" id="id_tag" name="tag" multiple>
                        
                        {% for tag in tags %}
                        <option value="{{tag.id}}" {% if request_tags %}
                          {% if tag.id|slugify in request_tags %}selected{% endif %}{% endif %}>{{ tag.name }}
                        </option>
                        {% endfor%}
                      </select>
                    </div>
                  </div>
                  <input type="hidden" name="tab_status" id="tab_status">
                  <div class="filter_col col-2">
                    <div class="form-group buttons_row">
                      <button class="btn btn-primary save" type="submit">Search</button>
                      <a href="" class="btn btn-default clear" onclick="window.location.reload">Clear</a>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-12">
      <div class="table_container_row no_mar_top">
        <div class="card">
          <div class="card-body">
            <div class="card-title text-right">
              <span class="float-left">Contact List - {{ contact_lists|length }}</span>
              <span class="filter_toggle">
                <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
              </span>
              <a href="{% url 'marketing:contact_list_new' %}" class="primary_btn">Add New Contact List</a>
            </div>
            <div class="table-responsive table-bordered ">
              <table class="table">
                {% if contact_lists %}
                <thead>
                  <tr>
                    <th width="5%">#</th>
                    <th width="10%">Name</th>
                    <th width="10%">Contacts</th>
                    <th width="15%">Bounced Contacts</th>
                    <th width="15%">Failed Contacts</th>
                    <th width="15%">Duplicates Contacts</th>
                    <th width="20%" class="text-center">Created by</th>
                    <th width="10%">Last Activity</th>
                    <th width="15%" class="text-center">Tags</th>
                    <th width="5%">Actions</th>
                  </tr>
                </thead>
                {% endif %}
                <tbody>
                  {% if per_page %}
                  {% paginate per_page contact_lists %}
                  {% else%}
                  {% paginate 10 contact_lists %}
                  {% endif %}
                  {% for contact_list in contact_lists %}
                  <tr style="text-align:center;">
                    <td scope="row">{{ forloop.counter }}</td>
                    <td><a href="{% url 'marketing:contact_list_detail' contact_list.id %}">{{ contact_list.name }}</td>
                    <td class="text-center">
                      <a href="{% url 'marketing:contact_list_detail' contact_list.id %}">
                        {{ contact_list.contacts.count }}
                      </a>
                    </td>
                    <td class="text-center">
                      <a href="{% url 'marketing:contact_list_detail' contact_list.id %}?bounced_contacts_page=1">
                        {{ contact_list.bounced_contacts }}
                      </a>
                    </td>
                    <td class="text-center">
                      <a href="{% url 'marketing:contact_list_detail' contact_list.id %}?failed_contacts">
                        {{ contact_list.failed_contacts.count }}
                      </a>
                    </td>
                    <td class="text-center">
                      <a href="{% url 'marketing:contact_list_detail' contact_list.id %}?duplicate_contacts">
                        {{ contact_list.duplicate_contact_contact_list.count }}
                      </a>
                    </td>
                    <td class="text-center">{{ contact_list.created_by }}</td>
                    <td title="{{ contact_list.updated_on }}">
                      {{ contact_list.updated_on_arrow }}
                    </td>
                    <td class="text-center">
                      {% for tag in contact_list.tags.all %}
                      <span class="text-left color{{forloop.counter}} tag_class_camp tag_class_cl" data-link="{{tag.id}}" id="list_tag" style="cursor: pointer;">{{tag.name}}</span>
                      {% empty %}
                      <span class="text-center">No Tags!</span>
                      {% endfor %}
                    </td>
                    <td class="actions text-center">
                      <a href="{% url 'marketing:edit_contact_list' contact_list.id %}" class="btn btn-success edit" title="Edit"><i
                          class="fas fa-edit"></i></a>
                      
                      {% comment %}
                      <a href="{% url 'marketing:delete_contact_list' contact_list.id %}"
                        class="btn btn-danger delete remove_account"><i class="fas fa-trash"></i></a>
                      {% endcomment %}
                    </td>
                  </tr>
                  {% empty %}
                  <tr style="text-align:center;">
                    <td colspan="6">No records found!</td>
                  </tr>
                  {% endfor %}
                  
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="marl row text-center mt-5">
        {% show_pages %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block js_block %}
<script>
  $(function () {
     function getQueryStringValue (key) {  
  return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));  
}
  if(getQueryStringValue('tag')){
    $('#id_tag').val(getQueryStringValue('tag')).trigger('change')
    // $('#id_tag').select2("data", "34")
}


 $(document).ready(function () {
    $(".filter_toggle").click(function () {
      $(".list_filter_row").toggle();
    });
  });

  search = "{{search}}"
  if (search == 'True') {
    $(".list_filter_row").show();
  }


    $('#id_tag').select2();
    $('#created_by').select2();

    $(".tag_class_cl").click(function () {
      // $(".tag_class_opp").css('cursor', 'pointer')
      url = "{% url 'marketing:contact_lists' %}"
      url = url + "?tag=" + $(this).attr('data-link')
      window.location.href = url;
    })

    $("a[rel='page']").click(function (e) {
      e.preventDefault();
      $('#leads_filter').attr("action", $(this).attr("href"));
      $('#leads_filter').submit();
    });

    $(".remove_account").click(function (e) {
      e.preventDefault()
      url = $(this).attr('href')
      if (!confirm('Are you sure you want to delete?'))
        return;
      window.location = $(this).attr('href')
    })
  })
</script>
{% endblock js_block %}